<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页 - BodyGuard体重管理</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    body {
      background-color: #f5f5f5;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      position: relative;
    }
    .page-content {
      height: calc(100vh - 112px);
      overflow-y: auto;
      padding-bottom: 60px;
    }
    .weight-trend {
      height: 200px;
      background: linear-gradient(to right, #4ade80, #34d399);
      border-radius: 1rem;
      position: relative;
    }
    .trend-line {
      position: absolute;
      bottom: 40px;
      width: 100%;
      height: 100px;
    }
    .trend-line::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: rgba(255, 255, 255, 0.5);
      top: 50%;
    }
    .trend-dot {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: white;
      border-radius: 50%;
      bottom: 0;
    }
    .card-shadow {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }
  </style>
</head>
<body>
  <!-- 导入状态栏和微信导航栏组件 -->
  <div id="statusbar-container"></div>
  
  <!-- 页面内容区域 -->
  <div class="page-content p-4">
    <!-- 体重概览卡片 -->
    <div class="weight-trend p-4 text-white mb-5">
      <div class="flex justify-between items-start">
        <div>
          <h2 class="text-base font-medium">当前体重</h2>
          <div class="flex items-end mt-1">
            <span class="text-3xl font-bold">66.5</span>
            <span class="ml-1 mb-1">kg</span>
          </div>
          <div class="mt-1 text-sm">
            <span class="bg-white/20 rounded-full px-2 py-0.5">
              <i class="fas fa-arrow-down text-xs"></i> 较昨日 -0.2kg
            </span>
          </div>
        </div>
        <div class="bg-white/20 rounded-xl p-2">
          <div class="text-sm">BMI 指数</div>
          <div class="text-2xl font-bold text-center">22.8</div>
          <div class="text-xs text-center">正常范围</div>
        </div>
      </div>
      
      <!-- 简化的趋势图 -->
      <div class="trend-line relative mt-6">
        <div class="trend-dot" style="left: 10%; bottom: 30%"></div>
        <div class="trend-dot" style="left: 25%; bottom: 50%"></div>
        <div class="trend-dot" style="left: 40%; bottom: 45%"></div>
        <div class="trend-dot" style="left: 55%; bottom: 60%"></div>
        <div class="trend-dot" style="left: 70%; bottom: 55%"></div>
        <div class="trend-dot" style="left: 85%; bottom: 70%"></div>
      </div>
      
      <div class="flex justify-between text-xs mt-4 text-white/70">
        <span>本周一</span>
        <span>周二</span>
        <span>周三</span>
        <span>周四</span>
        <span>周五</span>
        <span>今天</span>
      </div>
    </div>
    
    <!-- 今日任务提醒 -->
    <h2 class="text-lg font-medium mb-3">今日健康任务</h2>
    <div class="bg-white rounded-xl p-4 card-shadow mb-4">
      <div class="flex items-center justify-between mb-3">
        <div class="flex items-center">
          <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-500">
            <i class="fas fa-glass-water"></i>
          </div>
          <div class="ml-3">
            <div class="font-medium">喝水</div>
            <div class="text-xs text-gray-500">目标: 2000ml</div>
          </div>
        </div>
        <div class="text-sm text-green-500">5/8杯</div>
      </div>
      
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div class="bg-blue-500 h-2 rounded-full" style="width: 62.5%"></div>
      </div>
    </div>
    
    <div class="bg-white rounded-xl p-4 card-shadow mb-4">
      <div class="flex items-center justify-between mb-3">
        <div class="flex items-center">
          <div class="w-10 h-10 bg-pink-100 rounded-full flex items-center justify-center text-pink-500">
            <i class="fas fa-person-walking"></i>
          </div>
          <div class="ml-3">
            <div class="font-medium">步行</div>
            <div class="text-xs text-gray-500">目标: 8000步</div>
          </div>
        </div>
        <div class="text-sm text-green-500">6248/8000步</div>
      </div>
      
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div class="bg-pink-500 h-2 rounded-full" style="width: 78%"></div>
      </div>
    </div>
    
    <!-- 打卡提醒 -->
    <div class="bg-white rounded-xl p-4 card-shadow flex items-center">
      <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-500 text-xl">
        <i class="fas fa-scale-balanced"></i>
      </div>
      <div class="ml-4 flex-grow">
        <div class="font-medium">今日体重打卡</div>
        <div class="text-xs text-gray-500">坚持记录，保持健康</div>
      </div>
      <button class="bg-green-500 text-white px-4 py-2 rounded-full text-sm">
        立即打卡
      </button>
    </div>
  </div>
  
  <!-- 导入底部导航栏组件 -->
  <div id="tabbar-container"></div>
  
  <script>
    // 加载状态栏组件
    fetch('../components/statusbar.html')
      .then(response => response.text())
      .then(data => {
        document.getElementById('statusbar-container').innerHTML = data;
      });
    
    // 加载底部导航栏组件
    fetch('../components/tabbar.html')
      .then(response => response.text())
      .then(data => {
        document.getElementById('tabbar-container').innerHTML = data;
      });
  </script>
</body>
</html> 